<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ taglib prefix="s" uri="/struts-tags"%>
<%@taglib prefix="import" uri="/WEB-INF/tld/importTag.tld" %>
<%@taglib prefix="mu" uri="/WEB-INF/tld/mallutil.tld" %>
<%@taglib prefix="pu" uri="/WEB-INF/tld/pageutil.tld" %>
<%@taglib uri="http://java.sun.com/jstl/core" prefix="c"%>
<%@taglib uri="http://java.sun.com/jstl/core_rt" prefix="c-rt"%>
<%@taglib uri="http://java.sun.com/jstl/fmt_rt" prefix="fmt-rt"%>
<%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
${pu:reqSet('member', pu:get('com.yaodian100.ec.member.entity.Member', mu:memberId())) }
${pu:reqSet('email', sysMessage!=null?param.email:member.email) }
${pu:reqSet('phoneArea', sysMessage!=null?param.phoneArea:'') }
${pu:reqSet('homePhone', sysMessage!=null?param.phone:member.homePhone) }
${pu:reqSet('phoneExt', sysMessage!=null?param.phoneExt:'') }
${pu:reqSet('description', sysMessage!=null?param.description:'') }
${pu:reqSet('cellPhone', sysMessage!=null?param.cellPhone:member.mobile) }
<script>
$(function(){
	$('#current_location').html(' > 客服问答');
	<c-rt:if test="${!empty sysMessage }">
	//alertDialog('客服问答', '${sysMessage}');
	$('#dmsg').html('${sysMessage}');
	$('#dialog').dialog();
	</c-rt:if>
	$('#proposeCash').html('<a target="_blank" href="<c-rt:url value="/applyClaim/search.do"/>">汇款认领</a>');
});

var maxUpload = 10; //上傳檔案數
var maxSize = 500; //每個檔案限制500k
$().ready(function() {
	<s:if test="hasFieldErrors()">
		var uploadError = "<s:property value="fieldErrors['attach']"/>";
		if (uploadError != "") {
			$("#attachTip").show();
		}
	</s:if>
	
	$(":input[name*='commonQuestionTypeId']").each(function(){
		if ($(this).attr("id").indexOf("网站服务建议-")!=-1 || $(this).attr("id").indexOf("问题投诉-")!=-1) {
			$(this).click(function() {
				$("#attachArea").css("display","");
				$("input:file[id*='attach']").each(function(){
					$(this).attr("disabled","");
				});
				if ($(this).attr("id").indexOf("网站服务建议-")!=-1) {
					$("#class1Type").val("advice");
				} else {
					$("#class1type").val("complain");
				}
			});
			if ($(this).attr("checked") == true) {
				$(this).trigger("click");
			}
		} else {
			$(this).click(function() {
				$("#attachArea").css("display","none");
				$("input:file[id*='attach']").each(function(){
					var id = $(this).attr("id");
					$(this).attr("disabled","disabled");
					$("#"+id+"Correct").val("");
				});
				$("#class1type").val("normal");
			});
		}
	});
	$("#attach-0").bind("change",appendAttEvent);
});
function appendAttEvent() {
	var id = $(this).attr("id");
	if ($(this).val() == "") {
		$("#"+id+"Correct").val("");
		return;
	}
	//檢查檔案格式及大小
	
	var attObject = document.getElementById(id);
	checkUploadFile(attObject,maxSize,$("#"+id+"Correct"),"");
}

function appendUploadObject(currentId) {
	if ($("#"+currentId+"Correct").val() != "") return;
	var cnt = $("input:file[id*='attach']").length;
	if (cnt >= maxUpload) return;
	var currentIndex = (currentId.substring(7))*1;
	if (currentIndex < cnt-1) return;
	var id = "attach-"+ cnt;
	$button = $("<input type=\"file\"  id=\""+id+"\" name=\"attach\" class=\"file-upload\" size=\"40\" />");
	$button.bind("change",appendAttEvent);
	$("#attachFiles").append("<div>").append($button).append("<input type=\"hidden\" id=\""+id+"Correct\" value=\"\"/>").append("</div>");
}

function checkUploadFile(_fileobject,_size,isCorrectH,posMsg) {
	var msg = "" ;
	var imgpath = _fileobject.value;
	var fileType = imgpath.substring(imgpath.lastIndexOf(".")+1).toLowerCase();
	if (fileType != 'gif' && fileType != 'jpg' && fileType != 'jpeg' && fileType != 'png'){
		msg = "档案格式不是图片,请使用:JPG , GIF, PNG:"+ fileType;
		isCorrectH.val(msg);
		alert(msg);
	}else{
	  var isIE = false;
	  var isFF = false;
	  var isSa = false;
	  var isGo = false;
	
	  if((navigator.userAgent.toLowerCase().indexOf("msie")>0) && (parseInt(navigator.appVersion) >=4))isIE = true;
	  if(navigator.userAgent.toLowerCase().indexOf("firefox")>0)isFF = true;
	  if(navigator.userAgent.toLowerCase().indexOf("chrome")>0)isGo = true;
	  if(navigator.userAgent.toLowerCase().indexOf("safari")>0)isSa = true; 	
		
		if ( isIE ) {
			try {
				var activeX = new ActiveXObject("Scripting.FileSystemObject");
				var doc = _fileobject.value;
				var fi = activeX.getFile(doc);
				return validationUploadFile(_fileobject,fi,fi,_size,isCorrectH,posMsg) ;
			} catch (e) {
				isCorrectH.val("");
				appendUploadObject(_fileobject.id);
			}
		} else if( isFF ) {
			var fi = _fileobject.files.item(0);
			return validationUploadFile(_fileobject,fi,fi.getAsDataURL(),_size,isCorrectH,posMsg) ;
		} else {
			isCorrectH.val("");
			appendUploadObject(_fileobject.id);
		}
	}
}
function validationUploadFile(_fileobject,_file,_imgSrc,_size,isCorrectH,posMsg) {
	var msg = "" ;
	var image = new Image();
	var imgCorrect = true;
	image.src = _imgSrc;
	setTimeout(function(){
		if ((_file.size/1024) > _size ) {
			imgCorrect = false;
			msg =  msg+"档案大小: "+ Math.round(_file.size/1024) +"k 超过限制。";
		}
		if(imgCorrect){
			isCorrectH.val('');
			appendUploadObject(_fileobject.id);
		}else{
			isCorrectH.val(posMsg + msg);
			alert(posMsg + msg,{ 
				position: 'left', 
				focus: true, 
				alertzIndex: 300, 
				alertClass: 'default' 
				});  
		}
	},100);
}

</script> 
<!-- content start --> 
<div id="dialog" class="service-alert" title="客服问答" style="display:none">
<br /><p style="text-align:left;"><span id="dmsg">33333</span></p><br />
<div style="text-align:center;"><a href="javascript:;" id="commit" class="btn-mid">确定</a></div></div>
<div class="content mb-od"> 
    <!-- 我要询问 --> 
    <h2>我要询问</h2> 
    
<form name="questionForm" style="border:0px" action="<c-rt:url value="/member/cs/request.do"/>" method="post" enctype ="multipart/form-data" >
<table class="tb-2-service"> 
  <tr> 
    <th width="15%">用户名：</th> 
    <td width="38%">${member.loginId }</td> 
    <th width="15%"><span class="txt-rd">*</span> 邮箱：</th> 
    <td width="32%"><input name="email" type="text" value="${email }"/></td> 
  </tr> 
  <tr> 
    <th>订单编号：</th> 
    <td>
    <c-rt:choose>
	
	<c-rt:when test="${empty sysMessage && !empty param.orderId}">
		${param.orderId }<input name="orderId" type="hidden" value="${param.orderId }"/>
	</c-rt:when>
	<c-rt:otherwise>
    <input name="orderId" type="text" value="${param.orderId }" maxlength="13" /><span><a href="<c-rt:url value="/member/myOrder/showOrders.do?t=T&p=1"/>" target="_blank"> 查询</a></span>
	</c-rt:otherwise>
	</c-rt:choose>
    </td> 
    <th>商品名称：</th> 
    <td>
	<c-rt:choose>
	<c-rt:when test="${empty sysMessage && !empty param.productId}">
	${pu:reqSet('product', pu:get('com.yaodian100.ec.product.entity.Product', param.productId))}
    ${product.productName }<input name="productId" type="hidden" value="${param.productId }" maxlength="8" />
	</c-rt:when>
	<c-rt:otherwise>
	<input type="text" name="productId" value="${param.productId }"/>
	</c-rt:otherwise>
	</c-rt:choose>
    </td> 
  </tr> 
  <tr> 
    <th><span class="txt-rd">*</span> 固定电话：</th> 
    <td><input name="phoneArea" type="text" value="${phoneArea }" size="3" maxlength="4"/> - <input name="phone" type="text" value="${homePhone }" size="10" maxlength="8"/> - 分机 <input name="phoneExt" type="text" value="${phoneExt }" size="3" maxlength="8"/> 
    <p><strong class="txt-rd txt-s">*</strong> <span class="txt-ss">为必填栏位，固定电话与手机至少需填写一区。</span> </td> 
    <th><span class="txt-rd">*</span> 手机号码：</th> 
    <td><input name="cellPhone" type="text" value="${cellPhone }" maxlength="11" size="15"/></td> 
  </tr> 
 <import:around enableCache="false" url="question/request/commonQuestionType">
${pu:reqSet('member', pu:get('com.yaodian100.ec.member.entity.Member', mu:memberId())) }
<c-rt:set var="aHql">
from CommonQuestionType where parent=null order by sortOrder desc,id
</c-rt:set>
${pu:reqSet('cqts', pu:queryByHql(aHql, null, null)) }
  <tr> 
    <th><div class="vt">问题类型：</div></th> 
    <td colspan="3"> 
    <table class="tb-2-service1">
    <input type="hidden" id="class1Type" name="class1Type" value=""> 
    <c-rt:forEach items="${cqts }" var="cqt">
    	<c-rt:if test="${cqt.showOnQAA}">
    		<c-rt:set var="cqtcTotal" value="0"/>
    		<c-rt:forEach items="${cqt.childs}" var="cqtc" varStatus="status">
    			<c-rt:if test="${cqtc.showOnQAA}">
    				<c-rt:set var="cqtcTotal" value="${cqtcTotal+1}"/>
    			</c-rt:if>
    		</c-rt:forEach>
    		
    		<c-rt:set var="cqtcCount" value="0"/>
    		<c-rt:forEach items="${cqt.childs}" var="cqtc" varStatus="status">
    			<c-rt:if test="${cqtc.showOnQAA}">
    				<c-rt:set var="cqtcCount" value="${cqtcCount+1}"/>
    				<c-rt:if test="${cqtcTotal <= 4 && cqtcCount == 1}">
    					<tr><th>${cqt.name }</th>
    				</c-rt:if>
    				<c-rt:if test="${cqtcTotal > 4 && cqtcCount == 1}">
    					<c-rt:set var="n" value="${cqtcTotal/4}"/>
    					<c-rt:set var="n" value="${n+(1-(n%1))%1}"/>
    					<tr class="upper-row"><th rowspan="2">${cqt.name }</th>
    				</c-rt:if>
    				<c-rt:if test="${cqtcTotal > 4 && cqtcCount%4 == 1 && cqtcCount != 1}">
    					<tr>
    				</c-rt:if>
    				<td><label><input class="commonQuestionType" id="${cqt.name}-${status.count}" type="radio" name="commonQuestionTypeId" value="${cqtc.id }" <c-rt:if test="${cqtc.id==param.commonQuestionTypeId }">checked="checked"</c-rt:if>>${cqtc.name }</label></td>
    				<c-rt:if test="${cqtcCount%4 == 0 || cqtcTotal==cqtcCount}">
    					<c-rt:if test="${cqtcCount%4 != 0}">
	    					<c-rt:forEach begin="1" end="${4-cqtcCount%4}">
		        				<td>&nbsp;</td>
		        			</c-rt:forEach>
		        		</c-rt:if>
    					</tr>
    				</c-rt:if>
    			</c-rt:if>
    		</c-rt:forEach>		
    	</c-rt:if>
    </c-rt:forEach>		
    </table> 
    </td> 
    </tr> 
</import:around>
</table> 
<table class="tb-2-service"> 
  <tr> 
    <th><div class="vt">问题详细描述：</div></th> 
    <td><label> 
      <textarea name="description" id="description" cols="88" rows="5">${description }</textarea> 
    </label> 
    <p class="txt-gy">还可输入 <span id="wordCountDown">500</span> 字</p> 
    </td> 
  </tr> 
  <tr id="attachArea" style="display:none">
		<th><div class="vt">附加图档：</div>
		</th>
		<td class="upload-td-cell">
			<div id="attachFiles">
				<div><input type="file" id="attach-0" name="attach" class="file-upload" size="40" /><input type="hidden" id="attach-0Correct" value=""/></div>
			</div>
			<p class="txt-gy">（上传图档之格式限定为jpg, png
				或gif档案，每个档案不超过500kb，最多上传10个档案。 ）</p><span style="display: none;" class="msg rn" id="attachTip">请依指定格式上传图档</span></td>
	</tr>
  <tr> 
    <th><div class="vt">验证码：</div></th> 
    <td> 
    <div class="m-regform"> 
    <ul> 
      <li><div><INPUT size="20" name="validValue" value="" autocomplete=false/> <img src="" id="iv" name="iv"> <a href="javascript:;" id="changeValidImage">看不清？换张图片</a></div></li> 
     </ul> 
    </div> 
    </td> 
  </tr> 
</table> 
</form>
<p align="center"><a href="###" id="submit_button" class="btn-mid">提交</a></p> 
    </div> 
  <!-- content end --> 
<script><!--
$(function(){
	$("#dialog").dialog({
		bgiframe: true,
		autoOpen: false,
		height: 180,
		width:350,
		modal: true
	});
	$("#commit").click(function(){
		$("#dialog").dialog('close');
	});
	$('#submit_button').click(function(){
		var isSelected=false;
		for(i=0;i<$('.commonQuestionType').length;i++){
			if(document.questionForm.commonQuestionTypeId[i].checked==true){
				isSelected=true;
				break;
			}
		}
		if((document.questionForm.phoneArea.value=='' || document.questionForm.phone.value=='' ) && 
				document.questionForm.cellPhone.value==''){
			$("#dmsg").text("固定电话与手机至少需填写一区");
			$("#dialog").dialog('open');
			return false ;
		}
		if(!isSelected){
			$("#dmsg").text("请选择问题类型");
			$("#dialog").dialog('open');
			return false ;
		}
		//if(document.questionForm.orderId.value=='' && document.questionForm.productId.value==''){
		//	error+='请填订单编号或商品编号\r\n';
		//}
		if(document.questionForm.description.value==''){
			$("#dmsg").text("请填写问题");
			$("#dialog").dialog('open');
			return false ;
		}else{
			if(document.questionForm.description.value.length>500){
				$("#dmsg").text("问题长度限制为500个字");
				$("#dialog").dialog('open');
				return false ;
			}
		}
		
		var isUploadValid = true;
		$(":input[id*='Correct']").each(function(){
			if ($(this).val() != "") {
				var attachId = ($(this).attr("id").substring(0,$(this).attr("id").length-7));
				$("#"+attachId).focus();
				$("#dmsg").text("上传图档格式錯誤");
				$("#dialog").dialog('open');
				isUploadValid = false;
				return false;
			}
		});
		if (!isUploadValid) return false;
		
		if(document.questionForm.validValue.value==''){
			$("#dmsg").text("请填验证码");
			$("#dialog").dialog('open');
			return false ;
		}
		document.questionForm.submit();
	});
	$("#iv").attr("src","<c-rt:url value="/servlet/imageValid.jpg"/>?"+Math.random());
	$("#changeValidImage").click(function(){
		$("#iv").attr("src","<c-rt:url value="/servlet/imageValid.jpg"/>?"+Math.random());
	});
	$('#wordCountDown').html(500-document.questionForm.description.value.length);
	$("#description").keyup(function(){
		if(document.questionForm.description.value.length>500){
			$("#dmsg").text("已超过字数限制");
			$("#dialog").dialog('open');
			return false ;
		}else{
			$('#wordCountDown').html(500-document.questionForm.description.value.length);
		}
	});
	$('#wordCountDown').html(500-document.questionForm.description.value.length);
});
--></script>